<template>
    <view class=" min-h-screen  bg-[#f5f5f5]">
        <up-navbar :safeAreaInsetTop="true" bgColor="#FFF" :placeholder="true">
			<template #left>
				<view class="flex px-[24rpx] py-[16rpx] border-[1rpx] border-slate-200 rounded-[38rpx]">
					<up-icon name="arrow-left" size="19" @click="goback"></up-icon>
					<up-line direction="column" :hairline="false" length="16" margin="0 8px"></up-line>
					<up-icon name="home" size="20" @click="gohome"></up-icon>
				</view>
			</template>
		</up-navbar>
        <view class="px-[32rpx] py-[8rpx] bg-[#FFF]">
            <!-- :search="pageObj.keyword" -->
            <fangsearch @search="onSearch" ></fangsearch>
        </view>
        <view class="px-[96rpx] pr-[96rpx] py-[22rpx] flex justify-between items-center bg-[#FFF] ">
            <view class="text-[22rpx] text-[#222] font-normal" @click="checkNum(0)">综合</view>
            <view class="text-[22rpx] text-[#222] font-normal" @click="checkNum(1)">销量</view>
            <view class="text-[22rpx] text-[#222] font-normal flex" @click="checkNum(2)">
                <view>价格</view>
                <image v-if="pageObj.orderType === ''" src="../static/tb.png" mode="scaleToFill" class="w-[32rpx] h-[32rpx] block"/>
                <image v-else-if="pageObj.orderType == true" src="../static/ttt.png" mode="scaleToFill" class="w-[32rpx] h-[32rpx] block"/>
                <image v-else-if="pageObj.orderType == false" src="../static/tbb.png" mode="scaleToFill" class="w-[32rpx] h-[32rpx] block"/>
            </view>
        </view>
        <view class="m-[20rpx] ">
            <proudct v-for="(item,index) in list" :key="index" :item="item" ></proudct>
        </view>
    </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import proudct from '@/components/proudct.vue'
import fangsearch from '../../components/fangsearch.vue';
import { reactive, ref } from 'vue';
import { GetGoodPage } from '../../API/product';
const { goback , gohome } = useTab()
const { list , getList , checkNum , pageObj } = useList()
async function  onSearch(e){
    pageObj.keyword = e
    await getList()
}
function useTab(){
    const goback=()=>{
        uni.navigateBack()
    }
    const gohome=()=>{
        uni.switchTab({
            url:'/pages/index/index'
        })
    }
    return { goback , gohome }
}
function useList(){
    const list = ref([])
    const value = ref(0)
    const pageObj = reactive({
        pageNum:1,
        pageSize:10,
        keyword:'',
        orderType:'',
        orderColumn:0,//0:默认,1:销量排序,2:价格排序
    })
    const getList = async()=>{
       const { rows , total } = await GetGoodPage(pageObj)
       list.value = rows
    }
    const checkNum =  async(num)=>{
        if(num == 0){
            pageObj.orderColumn = num
        }else if(num == 1){
            pageObj.orderColumn = num
        }else if(num == 2){
            value.value++
            switch (value.value%3) {
                case 0:
                    pageObj.orderType = ''
                    break;
                case 1:
                    pageObj.orderType = true
                    break;
                case 2:
                    pageObj.orderType = false
                    break;
            }
        }
        await getList()
    }
    return { list , getList , pageObj , checkNum }
}
onLoad( async (options)=>{
    // pageObj.keyword = options.keyword
    await getList()
})
</script>

<style lang="scss" scoped>

</style>